<template>
  <cu-layout :navProp="{ placeholder: true, titleColor: 'black' }">
    <view :class="[`${prefixCls}-city-container`]">
      <scroll-view class="list-scroll" :scroll-y="isScroll" :scroll-into-view="jumpNum" @scroll="scroll">
        <view class="current" v-if="cityConfig.cityId">
          <view class="curr_city">当前选择城市：{{ cityConfig.cityName }}</view>
        </view>
        <view class="current">
          <p>定位城市</p>
          <view class="cityBox vertical_center">
            <view class="cityItem" hover-class="_hover" @click="choose({ id: '', name: locationInfo.addressComponent ? locationInfo.addressComponent.city : '' })">
              {{ locationInfo.addressComponent ? locationInfo.addressComponent.city : '定位中' }}
            </view>
            <image class="icon-refresh" :src="$CDN('/customer/static/svg/icon-sx-1.svg')" @click="GetLocation" />
          </view>
        </view>
        <view class="hot" id="indexHot">
          <p>热门城市</p>
          <view class="cityBox">
            <block v-for="(item, index) in cityList.hot" :key="index">
              <view class="cityItem" hover-class="_hover" @click="choose(item)">{{ item.name }}</view>
            </block>
          </view>
        </view>
        <view class="cityList">
          <block v-for="(item, index) in cityList.all" :key="index">
            <view class="listItem" :class="'index' + item.section">
              <view class="tit">{{ item.section }}</view>
              <block v-for="(item_1, index_1) in item.list" :key="index_1">
                <view class="item" hover-class="_hover" @click="choose(item_1)">{{ item_1.name }}</view>
                <view class="line" v-if="index_1 < item.list.length - 1"></view>
              </block>
            </view>
          </block>
        </view>
        <view class="sideBar vertical_center">
          <view class="item" data-id="indexHot" @click.stop="jumpMt">热门</view>
          <block v-for="(item, index) in letters" :key="index">
            <view class="item" :data-id="'index' + item" @click.stop="jumpMt">{{ item }}</view>
          </block>
        </view>
      </scroll-view>
    </view>
  </cu-layout>
</template>

<script>
import { hotCity } from '@/api/home'
import { mapActions, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'componentName',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      resource: '',
      showTip: false,
      tipData: {
        status: 2,
        type: '',
      },
      isScroll: false,
      open: true,
      letters: [],
      jumpNum: '', // 跳转到那个字母
      cityList: {
        hot: [],
        all: [],
      },
      scrollHeight: {},
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['locationInfo', 'cityConfig']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapMutations('location', ['SET_CITY_DATA']),
    ...mapActions('location', ['GetLocation', 'getCityInfo']),

    async getData() {
      this.getCityData()
      this.GetLocation()
    },

    jumpMt(e) {
      const heightName = e.currentTarget.dataset.id
      uni.pageScrollTo({
        scrollTop: this.scrollHeight[heightName],
        duration: 100,
      })
    },
    scroll() {
      this.jumpNum = '' // 滑动过程中清除之前的缓存，不然两次点击同一个字母不会滚动
    },
    async choose({ id, name, latitude = '', longitude = '' }) {
      if (!id) await this.getCityInfo()
      if (id && name) this.SET_CITY_DATA({ id, name, latitude, longitude })
      // this.$ROUTE.go({ path: '/pages/main/home' })
      uni.navigateBack()
    },
    async getCityData() {
      const { errcode, data } = await hotCity()
      if (errcode === 0) {
        const { all = [], hot = [] } = data
        this.cityList.hot = hot
        this.cityList.all = all
        this.letters = all.length ? all.map((item) => item.section) : []
        this.isScroll = true
        this.$nextTick(() => {
          this.getContainerHeight()
        })
      }
    },
    async getContainerHeight() {
      let height = 0
      uni
        .createSelectorQuery()
        .select(`.cityList`)
        .boundingClientRect((res) => {
          height = res.height
        })
        .exec()
      this.cityList.all.map((item) => {
        const bindId = `index${item.section.toString()}`
        const map = item
        uni
          .createSelectorQuery()
          .select(`.${bindId}`)
          .boundingClientRect((res) => {
            this.scrollHeight[bindId] = res.top - height
          })
          .exec()
        return map
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('city-container')} {
  position: relative;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  .list-scroll {
    width: 100%;
    box-sizing: border-box;
  }
  .cityItem {
    display: inline-block;
    width: 31%;
    margin-right: 3.5%;
    box-sizing: border-box;
    border: 1rpx #ccc solid;
    color: #222;
    margin-top: 20rpx;
    font-size: 32rpx;
    border-radius: 6rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    font-size: 26rpx;
    &:nth-of-type(3n) {
      margin-right: 0;
    }
    &._hover {
      background: #f0f0f0;
    }
  }
  .current {
    padding: 0 50rpx;
    .curr_city {
      margin-bottom: 14px;
      padding: 16rpx 0 16px;
      border-bottom: 2rpx solid #f0f0f0;
      font-size: 28rpx;
      color: #222222;
    }
  }
  .icon-refresh {
    width: 34rpx;
    height: 34rpx;
    margin-top: 20rpx;
  }
  .hot {
    padding: 0 50rpx;
    margin-top: 27rpx;
  }
  .current > p,
  .hot > p {
    color: #999;
    font-size: 26rpx;
  }
  .cityList {
    padding: 0 50rpx;
    margin-top: 30rpx;
    .tit {
      width: 100%;
      margin-left: -50rpx;
      padding: 0 50rpx;
      font-size: 22rpx;
      height: 40rpx;
      line-height: 40rpx;
      color: #999;
      background: #e6e6e6;
    }
    .item {
      width: 100%;
      margin-left: -50rpx;
      padding: 0 50rpx;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 26rpx;
      color: #222;
      &._hover {
        background: #f0f0f0;
      }
    }
    .line {
      width: 100%;
      height: 1rpx;
      background: #e6e6e6;
    }
  }
  .sideBar {
    position: fixed;
    top: 55%;
    right: 0;
    width: 50rpx;
    transform: translateY(-50%);
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    .item {
      width: 100%;
      margin-bottom: 13rpx;
      font-size: 22rpx;
      height: 37rpx;
      line-height: 37rpx;
      color: #666;
      text-align: center;
    }
  }
}
</style>
